<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="pic_header_box">
                <a-space>
                    <a-upload
                        ref="refUpload"
                        list-type="picture-card"
                        :default-file-list="fileList"
                        :show-file-list="false"
                        image-preview
                        :accept="'.jpg,.jpeg'"
                        @before-upload="uploadFileToServer"
                    >
                        <template #upload-button>
                            <a-space>
                                <a-button
                                    type="primary"
                                    :loading="uploadLoading"
                                    :disabled="uploadLoading || delActive"
                                >
                                    <div class="mr6" v-if="!uploadLoading">
                                        <icon-upload />
                                    </div>
                                    {{ $t('basics.shangchuanImg') }}</a-button
                                >
                            </a-space>
                        </template>
                    </a-upload>
                    <a-button
                        v-if="!delActive"
                        type="primary"
                        @click="selectImg"
                    >
                        <div class="mr6"><icon-delete /></div>
                        {{ $t('basics.batchDelImg') }}
                    </a-button>
                    <div v-else>
                        <a-space>
                            <a-button
                                type="primary"
                                status="success"
                                @click="selectOk"
                            >
                                <div class="mr6"><icon-delete /></div>
                                {{ $t('basics.confirmDeletion') }}
                            </a-button>
                            <a-button
                                type="secondary"
                                status="danger"
                                @click="selectCancel"
                            >
                                {{ $t('basics.concel') }}
                            </a-button>
                        </a-space>
                    </div>
                </a-space>
            </div>
            <div class="pic_content_box">
                <div class="pic_content_img"></div>
                <div class="img_box">
                    <div class="img_card" v-for="item of imgList">
                        <div
                            v-if="delActive"
                            class="del_btn"
                            :class="
                                delList.indexOf(item.id) != -1
                                    ? 'active_del'
                                    : ''
                            "
                            @click="activeImg(item.id)"
                        >
                            <icon-delete />
                        </div>
                        <a-image width="120" height="120" :src="item.pic_url" />
                    </div>
                </div>
                <p
                    v-if="imgList.length == 0"
                    style="
                        text-align: center;
                        color: #d9d9d9;
                        line-height: 50px;
                    "
                >
                    {{ $t('basics.noPicture') }}
                </p>
                <div class="pic_content_box_loading" v-if="loading">
                    <a-space size="large">
                        <a-spin :size="32" />
                    </a-space>
                </div>
            </div>
        </div>
        <a-modal
            v-model:visible="delVisible"
            :render-to-body="false"
            @ok="batchDelOk"
            @cancel="setCancel"
            draggable
        >
            <template #title> {{ $t('basics.batchDelImg') }} </template>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import { $request } from '@/utils/request';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/store';
import file2md5 from 'file2md5';

const { t } = useI18n();
const user = useUserStore().user;
const fileList = ref([]); // 组件-用于存储已上传的文件列表
const imgList = ref([]); // 图片列表
const delList = ref([]); // 选择删除的图片列表
const delActive = ref(false);
const loading = ref(false);
const uploadLoading = ref(false);
const delVisible = ref(false);
/**获取图片列表 */
const getImgList = async () => {
    loading.value = true;
    await $request
        .get('/cloud/taskPic/index')
        .then((response) => {
            imgList.value = response.items;
        })
        .catch((error) => {});
    loading.value = false;
};
/**上传图片 */
const uploadFileToServer = async (file) => {
    let index = file.name.indexOf('.');
    let typeName = file.name.slice(index + 1, file.name.length);
    if (typeName != 'jpg' && typeName != 'jpeg') {
        // 图片格式拦截
        Message.error(t('basics.restrictUploadType'));
        return;
    }
    loading.value = true;
    uploadLoading.value = true;
    const hash = await file2md5(file);
    const formData = new FormData();
    formData.append('file', file);
    formData.append('image', file);
    formData.append('isChunk', false);
    formData.append('hash', hash);
    await $request
        .post('/cloud/taskPic/add', formData)
        .then((response) => {
            // 处理上传成功的逻辑
            Message.success(t('basics.uploadSuccess'));
            getImgList();
        })
        .catch((error) => {
            // 处理上传失败的逻辑
            Message.error(t('basics.uploadError'));
        });
    uploadLoading.value = false;
};
/**批量选择图片 */
const selectImg = () => {
    delActive.value = true;
};
const activeImg = (id) => {
    let index = delList.value.indexOf(id);
    if (index == -1) {
        delList.value.push(id);
    } else {
        delList.value.splice(index, 1);
    }
};
/**确认选择删除 */
const selectOk = () => {
    if (delList.value.length == 0) {
        Message.error(t('basics.pleaseSelectPicture'));
        return;
    }
    delVisible.value = true;
};
/**取消选择 */
const selectCancel = () => {
    delList.value = [];
    delActive.value = false;
};
/**批量删除提示框-确认 */
const batchDelOk = () => {
    let params = {
        user_id: user.id,
        ids: delList.value
    };
    $request
        .post('/cloud/taskPic/delete', params)
        .then((response) => {
            // 处理上传成功的逻辑
            Message.success(t('basics.delSuccess'));
            getImgList();
        })
        .catch((error) => {
            // 处理上传失败的逻辑
            Message.success(t('basics.delError'));
        });

    delVisible.value = false;
    delActive.value = false;
};
/**取消 */
const setCancel = () => {
    delVisible.value = false;
};
getImgList();
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.app-container {
    .pic_header_box {
        width: 100%;
        height: 50px;
        display: flex;
        padding-bottom: 10px;
    }
    .pic_content_box {
        width: 100%;
        height: auto;
        position: relative;
        .img_box {
            width: 100%;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 10px;
            /* 滚动条整体部分 */
            &::-webkit-scrollbar {
                width: 6px; /* 垂直滚动条的宽度 */
                height: 6px; /* 水平滚动条的高度 */
            }

            /* 滚动条的滑块部分 */
            &::-webkit-scrollbar-thumb {
                background-color: #d1d1d1; /* 滑块颜色 */
                border-radius: 10px; /* 滑块圆角 */
                &:hover {
                    background-color: #999;
                }
            }

            /* 滚动条的轨道部分 */
            &::-webkit-scrollbar-track {
                background-color: transparent; /* 轨道颜色 */
            }
            .img_card {
                width: 120px;
                height: 120px;
                margin-right: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
                position: relative;
                .del_btn {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #00000050;
                    z-index: 10;
                    cursor: pointer;
                    font-size: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: 0.3s;
                    &:hover {
                        background-color: rgba(255, 0, 0, 0.651);
                    }
                }
                .active_del {
                    background-color: rgba(255, 0, 0, 0.651);
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .pic_content_box_loading {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            background-color: #00000050;
        }
    }
}
::v-deep .arco-modal-body {
    display: none;
}
::v-deep .arco-modal-header,
::v-deep .arco-modal-footer {
    border: 0px;
}
</style>
